import useMousePosition from '../hooks/useMousePosition';
<template>
	<div>useMousePosition</div>
	<div>x:{{ x }}, y:{{ y }}</div>
	<PropsEventsDemo name="李子一" :user="{ name: 'liziyi', age: 31 }" />
	<div class="profile-component">
		<h3>Name:{{ name }}</h3>
		<h3 v-if="!isHidden">Age:{{ user.age }}</h3>
		<h3 v-if="!isHidden">Double Age:{{ doubleAge }}</h3>
		<button type="button" @click="toggleHide">
			{{ isHidden ? '显示' : '隐藏' }}
		</button>
	</div>
</template>

<script lang="ts" setup>
import {
	//PropType,
	computed,
	onMounted,
	ref
} from 'vue'
import useMousePosition from '../hooks/useMousePosition'
import PropsEventsDemo from './PropsEventsDemo.vue'

interface IPerson {
	name: string
	age: number
}

interface IEvents {
	(e: 'change', hidden: boolean): void
}

const { x, y } = useMousePosition()
onMounted(() => {
	console.log('mounted in setup')
})

// const props = defineProps({
// 	user: {
// 		type: Object as PropType<IPerson>,
// 		required: true
// 	}
// })
const props = withDefaults(defineProps<{ user?: IPerson }>(), {
	user: () => ({ name: '', age: 0 })
})

// const emita = defineEmits(['change'])
const emits = defineEmits<IEvents>()
const name = 'setup demo'
const isHidden = ref<boolean>(false)
const toggleHide = () => {
	isHidden.value = !isHidden.value
	// emits('change', isHidden.value)
	emits('change', isHidden.value)
}
const doubleAge = computed(() => {
	return props.user?.age * 2
})
</script>
<style lang="scss" scoped></style>
